<!--
 * @Description: 新建结算单
 * @Author: py
 * @Date: 2024-03-24
-->
<script setup lang="ts">
import type { FormInstance } from 'element-plus'

import { manualCreateStatementApi } from '@fl/api/charge-settle'
import { SubmitBtn } from '@fl/components'

const emits = defineEmits(['success'])

const visible = defineModel<boolean>('visible', { required: true })

const formRef = ref()
const oDay = day()
const yesterdayLabel = oDay.subtract(1, 'day').format('YYYY-MM-DD')
const initialState = {
    settlementDate: yesterdayLabel,
}
const formValues = ref({ ...initialState })
const rules = {
    settlementDate: [{ message: '请选择结算日期', required: true, trigger: 'change' }],
}

const isPending = ref(false)
// 提交
async function handleSubmit(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate(async (valid) => {
        if (valid) {
            const {
                settlementDate,
            } = formValues.value
            const oParams = {
                settlementDate: `${settlementDate} 00:00:00`,
                // operatorId: '1',
                // operatorName: '城服集团',
            }

            isPending.value = true

            try {
                await manualCreateStatementApi(oParams)
                ElMessage.success('创建成功')

                visible.value = false
                emits('success')
            }
            catch (error) {
                console.error(error)
            }
            finally {
                isPending.value = false
            }
        }
    })
}

// 取消
function handleCancel() {
    visible.value = false
}

// 重置
function handleReset(formEl: FormInstance | undefined) {
    formValues.value = { ...initialState }
    if (!formEl)
        return
    // formRef.value.formInstance.resetFields()
    formEl.resetFields()
}
</script>

<template>
    <PlusDialog v-model="visible"
                title="生成结算单"
                width="500"
                class="statement-dialog"
                close-on-press-escape
                @cancel="handleCancel"
                @closed="handleReset(formRef)"
    >
        <el-form ref="formRef"
                 :model="formValues"
                 :rules="rules"
                 label-width="auto"
        >
            <el-form-item label="结算日期"
                          prop="settlementDate"
            >
                <el-date-picker v-model="formValues.settlementDate"
                                type="date"
                                placeholder="请选择结算日期"
                                value-format="YYYY-MM-DD"
                />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="pr-32 ml-auto">
                <el-button @click="handleCancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           :loading="isPending"
                           @click="handleSubmit(formRef)"
                >
                    确定
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>

<style lang="less">
.statement-dialog {
    border-radius: 4px;
    overflow: hidden;
    padding: 56px 0 16px !important;

    .el-dialog__header {
        height: 56px !important;
        padding: 0 32px !important;
        line-height: 56px;

        .el-dialog__title {
            color: #1d2129;
        }

        .el-dialog__headerbtn {
            top: 50%;
            transform: translateY(-50%);
            right: 16px;
        }
    }

    .el-dialog__body {
        padding: 24px 32px 8px !important;
    }

    .el-form-item--default {
        margin-bottom: 16px;
    }

    .el-form-item__label {
        color: #1d2129;
    }

    .el-select__placeholder {
        color: #1d2129;

        &.is-transparent {
            color: #c9cdd4;
        }
    }

    .el-input__inner {
        color: #1d2129;

        &::placeholder {
            color: #c9cdd4;
        }
    }
}
</style>

<style lang="less" scoped>
@import '../../custom.less';
</style>
